<template>
  <div class="dashboard-container">
    <!-- 需要给整个form组件绑定一个对象，form组件中的每一项需要和整个对象的一个属性进行绑定 -->
    <!--
      1. 给form组件提供 model属性， 提供一个对象
      2. 需要给form-item中的表单元素进行双向绑定， 和对象中的某个属性进行绑定
     -->
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item label="确认密码" prop="repassword">
        <el-input v-model="form.repassword" placeholder="请确认密码" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'Dashboard',
  data() {
    const validPassword = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }
    return {
      form: {
        username: '',
        password: '',
        mobile: '',
        repassword: ''
      },
      // 校验规则
      rules: {
        // 用户名的校验
        username: [
          { required: true, message: '用户名不能为空' },
          { min: 3, max: 9, message: '长度在3到9位' }
        ],
        password: [
          { required: true, message: '密码不能为空' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误' }
        ],
        repassword: [
          { required: true, message: '密码不能为空' },
          // 自定义校验规则
          { validator: validPassword }
        ]
      }
    }
  },
  methods: {
    login() {
      // console.log('发送请求')
      this.$refs.form.validate((isValue) => {
        console.log(isValue)
        if (isValue) {
          console.log('发送请求')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.red {
  color: red;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
